<template>
	<!-- 审核单个模块分页列表查询 -->
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryDataList" :auto="false" 
		:fixed="false">
			
			<!-- https://z-paging.zxlee.cn/api/slot/main.html#%E5%85%A8%E5%B1%8Floading-slot 第一次进入页面会触发，骨架屏 -->
			<template #loading>
				<uni-load-more status="loading"></uni-load-more>
			</template>
			
			<view class="list">
				<view class="item" v-for="item in dataList" :key="item._id">
					<soup-item  :fatherData="item"></soup-item>
				</view>
			</view>
		</z-paging>
	</view>
	
	
</template>

<script setup>
	
import { nextTick, ref, watch } from 'vue'
import {stateLists} from "@/utils/common.js"


const paging = ref(null)
const dataList = ref([])

const db = uniCloud.database()
const collection = db.collection('soup')
const firstLoaded = ref(false);


// 定义参数，用于接受父组件传递过来的参数
const props = defineProps({
	// 每一个索引 0,1,2  刚进页面会同时刷新三个列表
	"tabIndex":{
		type: Number,
		default: function() {
			return 0
		}
	},
	// 当前swiper切换到第几个索引  	// soupStatus: 0-待审核 1-审核通过 2-审核不通过
	"currentIndex":{
		type: Number,
		default: function() {
			return 0
		}
	}	
})

/**
 * 对当前索引进行监听，如果当前索引和父组件传递过来的索引一致，则进行刷新
 */
watch(()=> props.currentIndex, (newValue,oldValue)=>{
	if (newValue == props.tabIndex) {
		if(!firstLoaded.value) {
			// 等dom渲染完成在调用
			nextTick(()=>{
				setTimeout(()=>{
					paging.value.reload()
				}, 100)
			})
		}
	}
},{
	immediate: true
})

const queryDataList = (pageNo, pageSize) => {
	queryPage(pageNo, pageSize)
}
	
	
	
	
	
	
const queryPage = async (pageNo = 1, pageSize=10) => {
	// skip： 跳过多少条数据，从对应那条开始   limit：限制获取多少条数据
	let skip = (pageNo - 1) * pageSize;
	try {
		// 解构接口返回所需关键字段
		let {
			result: {
				errCode,
				data
			}
		} = await db.collection("soup-chicken").where({
				soup_status:stateLists[props.tabIndex].value
			}).field(
				"_id,soup_type,content,view_count,like_count,comment_count,collect_count,soup_status,publish_date,from,reject_reason"
			) 
			.orderBy(
				"last_modify_date",
				"desc")
			.skip(skip)
			.limit(pageSize).get();
		if (errCode != 0) return;
		paging.value.complete(data);
		firstLoaded.value = true
		
	} catch (err) {
		console.log(err)
		paging.value.complete(false);
	}

}
	
</script>
	
	
	

<style scoped lang="scss">
.content {
	height: 100%;
	.list{
		padding:30rpx 30rpx 0;		
	}
}	
</style>